﻿@section header {
    <script type="text/javascript">
        var CurrentID;
        Ext.onReady(function () {
            Ext.regModel('Addressbook', {
                fields: [
                    { name: 'ID', type: 'string' },
                    { name: 'Name', type: 'string' },
                    { name: 'Sex', type: 'string' },
                    { name: 'Company', type: 'string' },
                    { name: 'Department', type: 'string' },
                    { name: 'Job', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'HomePhone', type: 'string' },
                    { name: 'OfficePhone', type: 'string' },
                    { name: 'Mobile', type: 'string' },
                    { name: 'QQ', type: 'string' },
                    { name: 'MSN', type: 'string' },
                    { name: 'Email', type: 'string' },
                    { name: 'BirthDay', type: 'date', dateFormat: 'MS' },
                    { name: 'Remark', type: 'string' },
                    { name: 'Creator', type: 'string' },
                    { name: 'CreateTime', type: 'date', dateFormat: 'MS' },
                    { name: 'Owner', type: 'string' },
                    { name: 'LastUpdateTime', type: 'date', dateFormat: 'MS' }
            ]
            });

            var selfStore = new Ext.data.Store({
                model: 'Addressbook',
                proxy: {
                    type: 'ajax',
                    url: '/data/Addressbook/self'
                },
                listeners: {
                    load: function (store, records, successful) {
                        if (!successful) {
                        }
                        else {
                        }
                    }
                },
                autoLoad: true
            });

            var shareStore = new Ext.data.Store({
                model: 'Addressbook',
                proxy: {
                    type: 'ajax',
                    url: '/data/Addressbook/share'
                },
                listeners: {
                    load: function (store, records, successful) {
                        if (!successful) {
                        }
                        else {
                        }
                    }
                },
                autoLoad: true
            });

            var selfGrid = new Ext.grid.Panel({
                region: 'north',
                flex: 1,
                split: true,
                title: '我的通讯录',
                store: selfStore,
                selModel: new Ext.selection.CheckboxModel({
                    checkOnly: true,
                    listeners: {
                        select: function (RowSelectionModel, record, index) { alert(index) },
                        deselect: function (RowSelectionModel, record, index) { alert(index) }
                    }
                }),
                columns: [
                    new Ext.grid.RowNumberer(),
                    {
                        xtype: 'templatecolumn',
                        text: '姓名',
                        tpl: '<a href="javascript:alert(\'{ID}\')">{Name}</a>',
                        width: 80
                    },
                    {
                        text: '性别',
                        dataIndex: 'Sex',
                        width: 40
                    },
                    {
                        text: '所在单位',
                        dataIndex: 'Company',
                        flex: 1
                    },
                    {
                        text: '部门',
                        dataIndex: 'Department',
                        flex: 1
                    },
                    {
                        text: '手机号码',
                        dataIndex: 'Mobile',
                        width: 100
                    },
                    {
                        text: '电子邮件',
                        dataIndex: 'Email',
                        width: 100
                    },
                    {
                        text: '创建人',
                        dataIndex: 'Creator',
                        width: 80
                    },
                    {
                        text: '创建时间',
                        dataIndex: 'CreateTime',
                        width: 140,
                        renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s')
                    }
                    ],
                tbar: [
                    { xtype: 'button', iconCls: 'iconNew', tooltip: '新增', 
                        handler: function (source, e) { 
                            Ext.Msg.prompt('创建联系人', '请输入联系人名称:', function(btn, text){ 
                                if (btn == 'ok'){ 
                                    Ext.Ajax.request({ 
                                        url: '/office/myOffice/createAddress', 
                                        params: { 
                                            Name: text
                                        }, 
                                        success: function(response){ 
                                            selfGrid.getStore().load();
                                        } 
                                    }); 
                                } 
                            }); 
                        } },
                    { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip:'删除', handler: function (source, e) { } },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbfill' },
                    {
                        id: 'selfGrid_name',
                        xtype: 'textfield',
                        fieldLabel: '按姓名查询',
                        labelAlign: 'right',
                        listeners: {
                            specialkey: function (source, e) {
                                //debugger;
                                if (e.getKey() == e.ENTER) {
                                    alert(source.value);
                                }
                            }
                        }
                    },
                    {
                        xtype: 'button',
                        iconCls: 'iconSearch',
                        text: '',
                        tooltip: '查询',
                        tooltipType: 'title',
                        handler: function (source, e) {
                            // source.ownerCt.items.get('selfGrid_name') // 取文本框
                            alert(source.ownerCt.items.get('selfGrid_name').value);
                            this.up('panel').getStore().load();
                        }
                    },
                    { xtype: 'tbseparator' },
                    { xtype: 'button', iconCls: 'iconRefresh', text: '', tooltip: '刷新', handler: function (source, e) { this.up('panel').getStore().load(); } }
                    ],
                listeners: {
                    itemclick: function (view, record, item, index, e) {
                        if (record) {
                            var data = record.data;
                            Ext.getCmp('detailGrid').setSource({
                                Name: data.Name,
                                Sex: data.Sex,
                                Company: data.Company,
                                Department: data.Department,
                                Job: data.Job,
                                Address: data.Address,
                                HomePhone: data.HomePhone,
                                OfficePhone: data.OfficePhone,
                                Mobile: data.Mobile,
                                QQ: data.QQ,
                                MSN: data.MSN,
                                Email: data.Email,
                                BirthDay: data.BirthDay,
                                Remark: data.Remark,
                            });
                            CurrentID = record.data.ID;
                        }
                    }
                }
            });

            var shareGrid = new Ext.grid.Panel({
                region: 'center',
                flex: 1,
                title: '共享的通讯录',
                store: shareStore,
                selModel: new Ext.selection.CheckboxModel({
                    checkOnly: true,
                    listeners: {
                        select: function (RowSelectionModel, record, index) { alert(index) },
                        deselect: function (RowSelectionModel, record, index) { alert(index) }
                    }
                }),
                columns: [
                    new Ext.grid.RowNumberer(),
                    {
                        xtype: 'templatecolumn',
                        text: '姓名',
                        tpl: '<a href="javascript:debugger;alert(\'{ID}\')">{Name}</a>',
                        width: 80
                    },
                    {
                        text: '性别',
                        dataIndex: 'Sex',
                        width: 40
                    },
                    {
                        text: '所在单位',
                        dataIndex: 'Company',
                        flex: 1
                    },
                    {
                        text: '部门',
                        dataIndex: 'Department',
                        flex: 1
                    },
                    {
                        text: '手机号码',
                        dataIndex: 'Mobile',
                        width: 100
                    },
                    {
                        text: '电子邮件',
                        dataIndex: 'Email',
                        width: 100
                    },
                    {
                        text: '所有人',
                        dataIndex: 'Owner',
                        width: 80
                    },
                    {
                        text: '创建时间',
                        dataIndex: 'CreateTime',
                        width: 140,
                        renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s')
                    }
                    ],
                tbar: [
                    { xtype: 'tbseparator' },
                    { xtype: 'tbfill' },
                    { xtype: 'button', iconCls: 'iconRefresh', text: '', tooltip: '刷新', handler: function (source, e) { this.up('panel').getStore().load(); } }
                    ],
                listeners: {
                    itemclick: function (view, record, item, index, e) {
                        if (record) {
                            var data = record.data;
                            Ext.getCmp('detailGrid').setSource({
                                Name: data.Name,
                                Sex: data.Sex,
                                Company: data.Company,
                                Department: data.Department,
                                Job: data.Job,
                                Address: data.Address,
                                HomePhone: data.HomePhone,
                                OfficePhone: data.OfficePhone,
                                Mobile: data.Mobile,
                                QQ: data.QQ,
                                MSN: data.MSN,
                                Email: data.Email,
                                BirthDay: data.BirthDay,
                                Remark: data.Remark,
                            });
                            CurrentID = record.data.ID;
                        }
                    }
                }
            });


            var rightPanel = Ext.create('Ext.container.Container', {
                region: 'east',
                layout: 'fit',
                split: true,
                autoScroll: true,
                bodyPadding: 0,
                padding: 0,
                width: 300,
                margin: 0,
                tbar: [
                    { xtype: 'label', text: '个人办公 -> 我的订阅', cls: 'formNav' },
                    { xtype: 'tbfill' },
                    { xtype: 'button', iconCls: 'helpIcon', tooltip: '帮助', handle: function (source, e) { alert('帮助!') } }
                    ]
                , items: [
                    new Ext.grid.property.Grid({
                        id: 'detailGrid',
                        title: '详细信息',
                        width: 300,
                        hideHeaders: true,
                        sortableColumns: false,
                        tbar: [
                            { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip: '删除', handler: function (source, e) { } }
                            ],
                        source: {},
                        propertyNames: {
                            Name: '姓名',
                            Sex: '性别',
                            Company: '所在单位',
                            Department: '部门',
                            Job: '岗位',
                            Address: '地址',
                            HomePhone: '家庭电话',
                            OfficePhone: '办公电话',
                            Mobile: '手机号码',
                            QQ: 'QQ',
                            MSN: 'MSN',
                            Email: 'Email',
                            BirthDay: '出生日期',
                            Remark: '备注',
                        },
                        customEditors: {
                            Sex: Ext.create('Ext.form.field.ComboBox',{
                                store: Ext.create('Ext.data.Store', { 
                                    fields: ['sex'], 
                                    data : [ 
                                        {"sex":"男"}, 
                                        {"sex":"女"}
                                    ] 
                                }), 
                                queryMode: 'local', 
                                displayField: 'sex', 
                                valueField: 'sex',
                            }),
                            CreateTime: Ext.create('Ext.form.field.Text', { readOnly: true }),
                            Owner: Ext.create('Ext.form.field.Text', { readOnly: true }),
                            LastUpdateTime: Ext.create('Ext.form.field.Text',{readOnly:true}),
                        },
                        listeners: {
                            propertychange: function (source, recordId, value, oldValue) {
                                //debugger;
                                var field = recordId.split('-')[1];
                                if (field == 'Creator' || field == 'CreateTime' || field == 'Owner' || field == 'LastUpdateTime')
                                    return;
                                if (value != (oldValue === undefined ? "" : oldValue)) {
                                    Ext.Ajax.request({
                                        url: '/office/myOffice/updateAddress',
                                        params: {
                                            id: CurrentID,
                                            field: field,
                                            value: value
                                        },
                                        success: function (response, opts) {
                                            //alert('success');
                                        },
                                        failure: function (response, opts) {
                                            alert('server-side failure with status code ' + response.status)
                                        }
                                    });
                                }
                            }
                        }
                    })
                ]
            });



            var panel = Ext.create('Ext.panel.Panel', {
                region: 'center',
                layout: 'border',
                autoScroll: true,
                bodyPadding: 0,
                padding: 0,
                margin: 0,
                items: [
                    rightPanel,
                    {
                        xtype: 'container',
                        region: 'center',
                        layout: 'border',
                        items: [selfGrid, shareGrid]
                    }
                ],
                tbar: [
                    { xtype: 'label', text: '当前位置：个人办公 -> 我的通讯录', cls: 'formNav' },
                    { xtype: 'tbfill' },
                    { xtype: 'button', iconCls: 'helpIcon', tooltip: '帮助', handle: function (source, e) { alert('帮助!') } }
                    ]
            });

            new Ext.container.Viewport({
                layout: 'fit',
                border: 0,
                items: [panel]
            });
        });
    </script>
}
